.pe-calendar {
    width: 100%;
    font-size: var(--pe-font-size-large);

    .pe-calendar-title {
        font-size: 20px;
        font-weight: bold;
        padding: 10px;
        border-bottom: 1px solid var(--pe-color-border);
    }

    .pe-calendar-header {
        width: 100%;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid var(--pe-color-border);

        .pe-calendar-text {
            margin: 0 10px;
        }

        .pe-icon {
            cursor: pointer;

            &:hover {
                color: var(--pe-color-primary);
            }
        }
    }

    .pe-calendar-table {
        width: 100%;
        border-collapse: collapse;

        .pe-calendar-thead {
            td {
                padding: 10px;
                text-align: center;
            }
        }

        .pe-calendar-tbody {
            td {
                border: 1px solid #cccccc;
                height: 100px;
                width: calc(100% / 7);
                cursor: pointer;
                overflow: hidden;

                &:hover {
                    background-color: #f7f4ff;
                }

                .pe-calendar-item {
                    width: 100%;
                    height: 100%;
                    padding: 5px;

                    .pe-calendar-item-value {
                        width: 100%;
                        height: 20px;
                    }

                    .pe-calendar-item-slot {
                        width: 100%;
                        height: 70px;
                        overflow: auto;
                        word-break: break-all;
                    }
                }
            }

            .pe-calendar-active {
                background-color: #f7f4ff;
                color: var(--pe-color-primary);
            }

            .pe-calendar-not {
                color: var(--pe-color-placeholder);
            }
        }
    }
}